<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
    </div>
    <router-view></router-view>
</div>
</body>

<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
<script type="text/javascript">

    const Detail = Vue.component('detail', {
        template: '<div>这是 {{$route.params.name}} 的详情页面</div>'
    })

    const Article = Vue.component('myArticle', {
        template: `<ul>
            <li @click="getDetail('Vue 计算属性的学习')">
                1. Vue 计算属性的学习
            </li>
            <li @click="getDetail('React 基础学习')">
                2. React 基础学习
            </li>
        </ul>`,
        methods: {
            getDetail(name) {
                this.$router.push({
                    name: 'detail',
                    params: {
                        name: name
                    }
                })
            }
        }
    })

    const routes = [
        { path: '/detail/:name', name: 'detail', component: Detail },
        { path: '/', component: Article }
    ]

    const router = new VueRouter({
        routes: routes
    })

    var vm = new Vue({
        el: '#app',
        router: router,
        data() {
            return {}
        }
    })
</script>
</html>
